<template>
	<!-- 生产管理 -->
		<view>
			<view class="loading" v-if="loading">
				<u-loading-page :loading="loading"></u-loading-page>
			</view>
			<view class="content" v-else>
					<view class="search justify-center align-center">
						<u-search margin="0 auto" height="2.5rem" class="u-search" placeholderColor="#999" searchIconSize="18"
							shape="square" searchIcon="/static/app/search.png" placeholder="请输入搜索种子名称" @custom="searchFn"
							v-model="searchText" >
						</u-search>
					</view>
					<view class="search-bg"></view>
					<view class="productList" v-for="(item,index) in productList" :key="index" @click="toDetail(item.id)">
						<view class="productItem">
							<view class="top justify-start">
								<image class="avatar" src="/subPages/static/index/product/avatar.png" mode=""></image>
								<view class="text flex-col justify-between">
									<view class="title">{{item.seedName}}</view>
									<view class="text1">品种: {{item.cropVarieties}}</view>
								</view>
							</view>
							<view class="main justify-between align-center">
								<view class="left justify-start">
									<image class="map" src="/subPages/static/index/product/map.png" mode=""></image>
									<view class="text flex-col justify-between">
										<view class="text1">定值日期: {{$util.timestampToTime(item.colonizationTime).slice(0, 11)}}</view>
										<view class="text2">地块: {{item.landCode.split(',')[0]+(item.landCode.split(',').length>1?" ...等":"")}}</view>
									</view>
								</view>
								<view class="right">{{item.plantArea}}<text
										style="font-size: 1.2rem;font-weight: normal;">亩</text>
								</view>
							</view>
							<view class="progress">
								<view class="text">已生长{{item.growTimed}}天</view>
								<u-line-progress :percentage="(item.growTime/item.needTime)*100" height="8">
									<text class="u-percentage-slot"></text>
								</u-line-progress>
								<view class="date justify-between align-center">
									<view class="start">{{$util.timestampToTime(item.plantTime).slice(0, 11)}}</view>
									<view class="end">{{$util.timestampToTime(item.harvestTimed).slice(0, 11)}}</view>
								</view>
							</view>
							<view class="position">
								<view class="text" v-if="$util.getDictData('planting_status',item.plantStatus)=='已种植'" style="background: #fc6f21;">{{$util.getDictData('planting_status',item.plantStatus)}}</view>
								<view class="text" v-if="$util.getDictData('planting_status',item.plantStatus)=='种植中'" style="background: #53936c;">{{$util.getDictData('planting_status',item.plantStatus)}}</view>
								<view class="text" v-if="$util.getDictData('planting_status',item.plantStatus)=='已完成'" style="background: #999999;">{{$util.getDictData('planting_status',item.plantStatus)}}</view>
							</view>
						</view>
					</view>
					<u-loadmore height="2.5rem" :status="status"></u-loadmore>
			</view>
		</view>
</template>

<script>
import {getProductList} from '@/api/index/product.js';

export default {
		data() {
			return {
				loading: true,
				searchText: '',
				progressValue: 80,
				// 生产管理列表
				productList: [],
				pageInfo: {
					pageNo: 1,
					pageSize: 5,
					
				},
				status: 'loading'
			}
		},
		onLoad() {
			this.getProductListFn();
			this.loading=false;
		},
		methods: {
			searchFn(){
				uni.pageScrollTo({
					scrollTop:0
				})
				this.pageInfo={
					pageNo: 1,
					pageSize: 5,
					
				}
				this.productList=[]
				this.getProductListFn()
			},
			async getProductListFn() {
				let res = await getProductList({...this.pageInfo,seedName:this.searchText});
				if (res.list.length < this.pageInfo.pageSize) {
					this.status = 'nomore'
				}
				res.list.forEach(item => {
					// time为时间戳 timed为yy-mm-dd hh:mm:ss
					// 已生长时间
					item.growTime = Date.now() - item.plantTime
					// 已生长时间
					item.growTimed = Math.ceil((new Date().getTime() - item.plantTime) / 1000 / 60 / 60 / 24) <
						0 ? '未开始' : Math.ceil((new Date().getTime() - item.plantTime) / 1000 / 60 / 60 / 24);
					// 种植需要的时间
					item.needTime = item.harvestTime - item.plantTime
					
				})
				this.productList = this.productList.concat(res.list);
			},
			// 跳转详情页
			toDetail(id){
				uni.navigateTo({
					url:'/subPages/index/product/detail/index?id=' + id
				})
			}
		},
		onReachBottom() {
			this.pageInfo.pageNo++;
			this.getProductListFn()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif
		// #ifdef APP-PLUS
		min-height: 100vh;
		// #endif
		font-size: 1.4rem;
		color: #333;
		background: #F5F5F5;

		.search {
			position: fixed;
			// #ifdef H5
			top: 44px;
			// #endif
			// #ifdef APP-PLUS
			top: 0;
			// #endif
			width: 100%;
			height: 5.4rem;
			padding: 1rem 2rem;
			background: #fff;
			z-index: 100;
			.u-search {
				background: #FFF;
			}
		}

		.search-bg {
			height: 5.4rem;
		}

		.productList {
			width: calc(100% - 2rem);
			margin: 0 1rem;
			.productItem {
				position: relative;
				margin-top: 1.5rem;
				padding: 2.5rem 2rem .2rem;
				background: #fff;
				box-shadow: -0.1rem .3rem .6rem .1rem rgba(153, 153, 153, 0.3);
				border-radius: .8rem;
				
				.top {
					margin-bottom: 2rem;

					.avatar {
						height: 4.5rem;
						width: 4.5rem;
						margin-right: 1.5rem;
					}

					.title {
						font-size: 1.8rem;
						font-weight: bold;
					}

					.text1 {
						color: #999;
					}
				}

				.main {
					padding-bottom: .75rem;
					border-bottom: .1rem solid rgba(153, 153, 153, 0.15);

					.map {
						height: 4.5rem;
						width: 4.5rem;
						margin-right: 1.5rem;
					}

					.text {
						color: #999;
					}

					.right {
						font-size: 2rem;
						font-weight: bold;
					}
				}

				.progress {
					font-size: 1rem;
					color: #999;
					text-align: center;

					.text {
						color: #999999;
						font-size: 1rem;
						margin: .5rem 0;
					}

					.u-line-progress {
						overflow: visible;
					}

					.u-percentage-slot {
						background: url("/subPages/static/index/product/point.png") no-repeat center !important;
						background-size: 2.5rem !important;
						padding: 1.25rem;
						transform: translate(1.25rem, .2rem);
					}

					/deep/ .u-line-progress__background {
						height: 1rem !important;
					}

					/deep/ .u-line-progress__line {
						height: 1rem !important;
						background: linear-gradient(95deg, #35B2FC 0%, #A436D3 52%, #F97D29 100%);
					}

					.date {
						margin: .5rem .25rem;
						font-size: 1rem;
						color: #999;
					}
				}

				.position {
					position: absolute;
					top: 0;
					right: 0;

					.text{
						border-radius: 0 1rem 0 0;
						padding: .2rem;
						color: #fff;
					}
				}
			}
		}
	}
</style>
